<!-- TreeCheckbox.vue -->
<template>
  <div class="tree-checkbox">
    <div
      v-for="item in treeData"
      :key="item.value"
      class="tree-item"
      :style="{ marginLeft: `${level * 20}px` }"
    >
      <el-checkbox
        :label="item.value"
        v-model="selectedValues"
        @change="handleChange"
      >
        {{ item.label }}
      </el-checkbox>
      <!-- 递归渲染子节点 -->
      <tree-checkbox
        v-if="item.children && item.children.length"
        :tree-data="item.children"
        v-model="selectedValues"
        :level="level + 1"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  treeData: {
    type: Array,
    required: true,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  level: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["update:modelValue"]);
const selectedValues = ref([...props.modelValue]);

const handleChange = () => {
  emit("update:modelValue", selectedValues.value);
};
</script>

<style scoped>
.tree-item {
  margin: 0px 0;
}
</style>
